<!--备忘管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">备忘管理</span>
    <el-button type="primary" @click="saveDialog"
               style="float:right;margin-top:10px;">新建备忘</el-button>
  </div>
  <!-- 新建备忘弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <!--      <el-row :gutter="10">-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="员工编号">-->
      <!--            <el-input placeholder="请输入ID" v-model="saveNoteFrom.userId"></el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="部门编号">-->
      <!--            <el-input placeholder="请输入内容" v-model="saveNoteFrom.departmentId"></el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="标题">
            <el-input placeholder="请输入标题" v-model="saveNoteFrom.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可见范围">
            <el-select v-model="saveNoteFrom.visible" placeholder="请选择">
              <el-option value="0" label="所有人"></el-option>
              <el-option value="1" label="部门可见"></el-option>
              <el-option value="2" label="仅自己"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="公告内容">
            <el-input
                v-model="saveNoteFrom.content"
                maxlength="500"
                autosize
                placeholder="请输入公告内容"
                show-word-limit
                type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveNote">确定</el-button>
    </template>
  </el-dialog>

  <!-- 查看备忘详情弹窗 -->
  <el-dialog
      v-model="noteVisible"
      style="width: 1300px;padding: 20px;"
      :before-close="handleCloseB">
    <h2>{{noteDetail.title}}</h2>
    <hr>
    <h4>
      <span>发布人:&nbsp;<u>{{noteDetail.userId}}</u></span>&nbsp;&nbsp;|&nbsp;&nbsp;
      <span>部门:&nbsp;<u>{{noteDetail.departmentId}}</u></span>&nbsp;&nbsp;|&nbsp;&nbsp;
      <span>发布时间:&nbsp;{{noteDetail.createTime}}</span>
    </h4>

    <el-text class="mx-1" size="large">{{noteDetail.content}}</el-text>
  </el-dialog>

  <!--公告搜索卡片-->
  <el-card style="margin: 20px;height: 70px">
    <el-form :inline="true">
      <el-form-item label="可见范围" style="width: 200px;">
        <el-select placeholder="请选择" v-model="searchNote.visible">
          <el-option label="所有人" value=0></el-option>
          <el-option label="部门" value=1></el-option>
          <el-option label="仅自己" value=2></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" style="width: 800px;">
        <el-date-picker
            v-model="searchNote.startTime"
            type="datetime"
            placeholder="开始日期"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
        />
        &nbsp;至 &nbsp;
        <el-date-picker
            v-model="searchNote.endTime"
            type="datetime"
            placeholder="结束日期"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
        />
      </el-form-item>
      <el-form-item style="float: right">
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadNote">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 公告列表 -->
  <el-card style="margin:20px;">
    <el-table :data="noteList">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="userId" label="员工编号"  align="center"/>
      <el-table-column prop="departmentId" label="部门编号"  align="center"/>
      <el-table-column prop="title" label="标题"  align="center"/>
      <el-table-column prop="createTime" label="创建时间"  align="center"/>
      <el-table-column prop="visible" label="可见范围" :formatter="visibleFormatter" align="center"/>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button link type="info" size="small" @click="showNote(scope.row.id)">查看</el-button>
          <el-button link type="danger" size="small" @click="deleteNote(scope.row.id,scope.row.userId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:30px;float: right;">
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          v-model:current-page="currentPage"
          v-model:page-size="currentSize"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
// import axios from "axios";
import {ElMessage} from "element-plus";
import axios from "@/http";
import index from "vuex";

const searchNote = ref({});
const noteList = ref([]);
const saveNoteFrom = ref({});
const dialogTitle = ref('新建备忘');
const dialogVisible = ref(false);
const currentPage = ref(1);
const currentSize = ref(5);
const total = ref(100);

const userInfo = getUser();
const username = userInfo?userInfo.username:'用户';
var id = userInfo.id;
var departmentId = userInfo.departmentId;

//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  loadNote();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  loadNote();
}

const loadNote = ()=>{
  searchNote.value.pageSize = currentSize.value;
  searchNote.value.pageNum = currentPage.value;

  let data = qs.stringify(searchNote.value);
  axios.get(BASE_URL+'/oa/note/select?'+data).then((response)=>{
    if(response.data.code == 20000){
      noteList.value = response.data.data.list;
      total.value = response.data.data.total;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

onMounted(()=>{
  loadNote();
})


const visibleFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 0){
    cellValue = '所有人';
  }else if(cellValue == 1){
    cellValue = '部门';
  }else if(cellValue == 2){
    cellValue = '仅自己';
  }
  return cellValue;
}

const resetSearch = () => {
  searchNote.value = {};
  loadNote();
}

const saveDialog = () => {
  dialogVisible.value = true;
}

const handleClose = () => {
  if (confirm('确定要删除本弹窗?')) {
    dialogVisible.value = false;
    saveNoteFrom.value = {};
    loadNote();
  }
}
const handleCloseB = () => {
  if (confirm('确定要关闭本公告?')) {
    noteVisible.value = false;
    saveNoteFrom.value = {};
    loadNote();
  }
}


const saveNote = () => {
  saveNoteFrom.value.userId = id;
  saveNoteFrom.value.departmentId = departmentId;
  let data = qs.stringify(saveNoteFrom.value);
  axios.post('/oa/note/save?',data).then((response) => {
    if (response.data.code == 20000) {
      ElMessage.success("公告发布成功!");
      dialogVisible.value = false;
      saveNoteFrom.value = {};
      searchNote.value = {};
      loadNote();
      note();
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//备忘详情
const noteVisible = ref(false);
const noteDetail = ref({});

const showNote = (id) => {
  noteVisible.value = true;
  axios.get('/oa/note/show?id=' + id).then((response) => {
    if (response.data.code == 20000) {
      noteDetail.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

const deleteNote = (id,userId) => {
  if(confirm('确定要删除本公告?')){
    axios.post(BASE_URL+'/oa/note/delete/'+id+'/'+userId).then((response)=>{
      if(response.data.code == 20000){
        ElMessage.success("删除成功")
        loadNote();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
const note = () => {
  axios.get(BASE_URL+'/oa/note/addNum').then((response)=>{
  })
}
</script>

<style scoped>

</style>